<template>
<view class="page"> 
	<!-- 轮播视频图 -->
	<view class="swiper_div">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
			<swiper-item v-for="(item,index) in swiperImg" :key="index">
				<view class="swiper-item" >
					<!-- :style="'background:'+ (index==0?'#f93':index==1?'#00ff33':'#15c1ff')" -->
					<image v-if="item.img" class="image" :src="item.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<!-- 首页入口按钮 -->
	<view class="btn_div">
		<view class="btn_item" v-for="(item,index) in menuList" :key="index" @click="toPage(item.url)">
			<image :src='item.img' mode=""></image>
			<view class="">{{item.name}}</view>
		</view>
	</view>
	
	<view class="swiper_div swiper_div1" v-if="isXs">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
			<swiper-item v-for="(item,index) in ggList" :key="index">
				<view class="swiper-item" >
					<image v-if="item.img" class="image" :src="item.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	
	<!-- 底部列表 -->
	<view class="bottom_list">
		<view class='flex type_div'>
			<view @click="changeType(item)" class="listType" :class="type_name==item.id?'active_item':''" v-for="(item,index) in listType" :key="index">{{item.name}}</view>
		</view>
		<toplist :isSS='false' :type='type_name' :isshow='isshow' @showChain='showChain' @changeQuery='changeQuery'></toplist>
		<listPage :type_name='type_name' height='calc(100% - 90px)' :isMore='true' :list='list' :total='total' @toMore='toMore' @getMore='getMore'>
			<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
		</listPage>
	</view>
</view>
</template>

<script setup>
	import {line,bar} from '@/utils/charts.js'
	import {onShareAppMessage,onShow} from '@dcloudio/uni-app';
	const style = reactive({
		background:'red'
	})
	// const props = defineProps({
	//   foo,
	//   bar,
	// })
	
	import chainMap from '@/components/chainMap.vue'
	import listPage from '@/components/listPage.vue'
	import endlist from '@/components/endlist.vue'
	import toplist from '@/components/toplist.vue'
var icon1 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon1.png'
var icon2 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon2.png'
var icon3 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon3.png'
var icon4 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon4.png'
var icon5 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon5.png'
var icon6 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon6.png'
var icon7 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon7.png'
var icon8 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon8.png'

import icon11 from '~@/static/image/index/icon11.png'
import icon22 from '~@/static/image/index/icon22.png'
import icon33 from '~@/static/image/index/icon33.png'
import icon44 from '~@/static/image/index/icon44.png'


	// import icon5 from 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/c_icon1.png'
	import {GetVersionStatus,hkroom,citySj,news,GetMainNavsImgs,parklist,localprojects,policy,companylist,GetSuCitysList} from '@/utils/api.js'
	
	
	const ggList = reactive([
		{img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/middle.png'},
	])
	
	
	const isLoad = ref(false) 
	const isshow = ref(false) 
	let  listQuery = reactive({})
	const isfinsh = ref(false)
	const total = ref(0)
	var page = 1
	var list =reactive([])
	var type_name = ref('park')
	var totalNum = reactive([0,0,0,0])
	
	var newsList = reactive([])
	var animate = ref(false)
	var time = null
	
	
	function toMore(){
		let page = type_name.value + 'List'
		uni.navigateTo({
			url:`/pages/${page}/${page}?chain_id=${listQuery.chain_id||''}`
		})
	}
	function showChain(){
		if(isshow.value == true){
			isshow.value = false
			return
		}
		isshow.value=true
	}
	function changeQuery(data){
		listQuery = Object.assign(listQuery,data)
		page = 1
		list.length = 0
		isfinsh.value = false
		showChain()
		getList()
	}
	onShow(()=>{
		let city = uni.getStorageSync('chooseCity')
		if( (listQuery.city_id==city.id)){
			return
		}else{
			listQuery.city_id = city.id||''
			page = 1
			list.length = 0
			isfinsh.value = false
			getList()
		}
	})

	onShareAppMessage(()=>{
		return {
			title: '投资钟祥   欢迎您',
		}
	})
	
	function toMap(type){
		uni.setStorageSync('type',type)
		uni.switchTab({
			url:`/pages/mapPage/mapPage`
		})
	}
	
	function toDzmp(){
		if((!uni.getStorageSync('token')||!uni.getStorageSync('userinfo')||uni.getStorageSync('userinfo').length<=2 || uni.getStorageSync('userinfo')==null || uni.getStorageSync('userinfo')=='null')){
			uni.showModal({
				title:'提示',
				content:'该功能需要登录',
				showCancel:true,
				success:e=>{
					if(e.confirm){
						uni.switchTab({
							url:'/pages/my/my'
						})
					}
				}
			})
			return
		}else{
			uni.navigateTo({
				url:`/pages/dzmp/dzmp`
			})
		}
	}
	
	
	function toList(e){
		let url_a = typeIndex.value==0?'/pages/projectList/projectList':
							typeIndex.value==1?'/pages/parkList/parkList':
							typeIndex.value==2?'/pages/companyList/companyList':'/pages/policyList/policyList'
		console.log(url_a)
		 uni.navigateTo({
			url: url_a + '?keywords=' + e.detail.value
		 })
	}
	
	function toNewsDetail(id){
		uni.navigateTo({
			url:`/pages/newsDetail/newsDetail?id=${id}`
		})
	}
	
	function dong(){
		if(!newsList){
			return
		}
		if(time){
			clearInterval(time)
		}
		let that = this
		time = setInterval(()=>{
			newsList.forEach(item => {
				item.top='-58px';
			});
			animate.value=!animate.value
			setTimeout(()=>{
				newsList.push(newsList[0]);
				newsList.shift();
				newsList.forEach(item => {
					item.top='0px';
				});
				animate.value=!animate.value // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
		},3000)
	}
	
	onBeforeUnmount(()=>{
		clearInterval(time)
	})
	
	// 数字类型
	var szTypeList = [
		{name:'GDP',id:'0'},
		{name:'人口',id:'1'},
		{name:'三产产值',id:'2'},
		{name:'重点产业产值',id:'3'},
	]
	var sz_type = ref('0')
	var isShow = ref(false)
	var chartData = reactive({data:{}})
	var swiperImg = reactive([{img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/top.png'}])
	
	
	onBeforeMount(()=>{
		getList()
	})
	var isOk = ref(true)
	var isXs = ref(true)
	onMounted(async ()=>{	
		
	})
	const city_name = uni.getStorageSync('myCity').city_name.split('省')[0].split('市')[0].split('区')[0].split('县')[0]
	
	var isBottom = uni.getStorageSync('bottom')
	var navH = ref(uni.getStorageSync('navH'))
	var navH1 = ref(uni.getStorageSync('navH1'))
	var navH2 = ref(uni.getStorageSync('navH2'))
	
	//轮播颜色
	var background = ['color1', 'color2', 'color3']
	
	var type = reactive(['项目','园区','企业','政策'])
	var typeIndex = ref(0)
	//切换头部搜索类型
	function bindPickerChange(e){
		typeIndex.value = e.detail.value
	}
	
	//menu列表
	var menuList = [
		{name:'园区招商',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/001.png',url:'parkList',bg:'btnbg2'},
		{name:'企业招商',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/002.png',url:'companyList',bg:'btnbg3'},
		{name:'政策招商',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/003.png',url:'policyList',bg:'btnbg4'},
		{name:'会议招商',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/004.png',url:'huiyiPage',bg:'btnbg6'},
		{name:'项目招商',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/005.png',url:'projectList',bg:'btnbg7'},
		{name:'政策云计算',img:'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/006.png',url:'policy_page',bg:'btnbg8'},
	]
	
	//产业链
	var chainList =reactive(uni.getStorageSync('myChain'))
	function toChainDetail(chain){
		uni.navigateTo({
			url:'/pages/chainDetail/chainDetail?chain='+JSON.stringify(chain)
		})
	}
	
	// 底部列表
	var listType = [
		// {name:'区县',id:'city'},
		{name:'重点园区',id:'park'},
		{name:'重点企业',id:'company'},
		{name:'重点项目',id:'project'},
		{name:'重点政策',id:'policy'},
	]

	
	//切换底部列表
	function changeType(e){
		type_name.value = e.id
		console.log(e.id,type_name.value)
		page = 1
		list.length = 0
		isfinsh.value = false
		getList()
	}
	function getMore(){
		page += 1
		getList()
	}

	//切换底部列表
	function getList(){
		if(isfinsh.value){
			return
		}
		var data = {
			city_id:uni.getStorageSync('myCity').id,
			page,
			lat:uni.getStorageSync('lat'),
			lng:uni.getStorageSync('lng'),
			...listQuery
		}
		console.log(listQuery)
		if(listQuery.paixu!=2&&type_name.value == 'company'){
			data.lat=''
			data.lng=''
		}
		
		isLoad.value = true
		var api = type_name.value == 'city'?GetSuCitysList(data):
							type_name.value == 'park'?parklist(data):
							type_name.value == 'project'?localprojects.getList(data):
							type_name.value == 'policy'?policy.getList(data):
							type_name.value == 'company'?companylist(data):''
		api.then(res=>{
			if(type_name.value == 'city'){
				list.push(...res.data)
				isfinsh.value = true
				isLoad.value = false
				return
			}
			list.push(...res.data.data)
			isLoad.value = false
			total.value = res.data.total
			if(res.data.last_page == page){
				isfinsh.value = true
			}
		})
	}
	// 跳转页面
	function toPage(url){
		uni.navigateTo({
			url:`/pages/${url}/${url}`
		})
	}
	
</script>
<style scoped lang="scss">
page{
	height: 100%;
	width: 100%;
}
.page {
	height: 100%;
	// background-color:v-bind('style.background');
	width: calc(100% - 30px);
	margin: 0 15px;
	.nav{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 1000;
		transition: all 0.5s;
	}
	.input_view{
		display: flex;
		align-items: center;
		border-radius: 2px;
		color: #333;
		width: 100%;
		.logo_top{
			height: 40px;
			width: 125px;
			margin-right: 12px;
			margin-left: 7px;
		}
		.logo_top1{
			width: 44px;
			height: 26px;
			// margin-left: 10px;
		}
		.name_top{
			font-size: 20px;
			font-weight: 500;
			min-width:100px;
		}
	}
}
.input_div{
	width: 100%;
	height: 34px;
	opacity: 1;
	border-radius: 10px;
	background: #f6f6f6;
	margin: 10px auto 15px;
	display: flex;
	position: relative;
	align-items: center;
	.ss{
		position: relative;
		width: 16px;
		height: 16px;
		margin: 0 12px 0 12px;
	}
	.ss_text{
		font-size: 12px;
		color: #333;
		width: calc(100% - 140px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		&::-webkit-input-placeholder {
			color:  rgba(197, 197, 197, 1);
		}
	}
	.ss_type{
		position: absolute;
		right: 12px;
		color: rgba(0, 145, 255, 1);
		font-weight: 800;
		font-size: 12px;
		display: flex;
		align-items: center;
		width: 70px;
		text{
			display: inline-block;
			width: 50px;
		}
		image{
			height: 12px;
			width: 12px;
			margin-left: 6px;
			position: relative;
			top: 2px;
		}
		&::before{
			position: absolute;
			content: ' ';
			height: 16px;
			width: 2px;
			background: #eee;
			left: -10px;
		}
	}
}
.swiper_div{
	width: 100%;
	height: 150px;
	border-radius: 12px;
	overflow: hidden;
	.swiper {
		height: 100%;
	}
	.swiper-item {
		display: block;
		height: 100%;
		text-align: center;
		.image{
			width: 100%;
		}
	}
}

.swiper_div1{
	border-radius: 4px;
	height: 90px !important;
	margin: 30px 0 40px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn_div{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	margin: 15px 0;
	// .btn_item{
	// 	width: calc(50% - 5px);
	// 	margin-bottom: 10px;
	// 	border-radius: 8px;
	// 	text-align: center;
	// 	padding: 10px 0;
	// 	color: #666;
	// 	font-size: 14px;
	// 	image{
	// 		width: 42px;
	// 		height: 42px;
	// 		margin-bottom: 6px;
	// 	}
	// }
	.btn_item{
		width: 33%;
		margin-bottom: 10px;
		border-radius: 8px;
		text-align: center;
		padding: 10px 0;
		color: #666;
		font-size: 14px;
		image{
			width: 32px;
			height: 32px;
			margin-bottom: 2px;
		}
	}
	.btnbg1{
		background: rgba($color: #0091FF, $alpha: .1);
		box-shadow: 0px 1px 2px 0px rgba($color: #0091FF, $alpha: .2);
	}
	.btnbg2{
		background: rgba($color: #C75CDD, $alpha: .1);
		box-shadow: 0px 1px 2px 0px rgba($color: #C75CDD, $alpha: .2);
	}
	.btnbg3{
		background: rgba($color: #2DD890, $alpha: .1);
		box-shadow: 0px 1px 2px 0px rgba($color: #2DD890, $alpha: .2);
	}
}
.title{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	color: #333;
	padding: 10px 0 20px;
}
.chain_item{
	width: 24%;
	text-align: center;
	color: #666;
	font-size: 12px;
	margin-bottom: 15px;
	.chain_text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	image{
		width: 42px;
		height: 42px;
		margin-bottom: 4px;
	}
}
// #ifdef APP-PLUS
.bottom_list{
	height: 580px;
}
// #endif

// #ifndef APP-PLUS
.bottom_list{
	height: calc(100% - 180px);
	margin-top: 40px;
}
// #endif
.index_list{
	height: calc(100% - 50px);
	position: relative;
}
.type_div{
	background-color: #fff;
}
.listType{
	width: 25%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #fff;
}
.active_item{
	font-size: 18px;
	position: relative;
	font-weight: bold;
	&::before{
		content: ' ';
		position: absolute;
		bottom: 4px;
		height: 3px;
		width: 60px;
		background-color: #C79D5E;
		border-radius: 3rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}

.list_item{
	width: calc(100% - 30px);
	// min-height: 100px;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 20px 5px;
	position: relative;

	.img{
		width: 120px;
		height: 90px;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
		.logo_name{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #0091FF;
			color: #fff;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_level{
			position: absolute;
			top: 6px;
			left: 0px;
			padding: 2px 8px;
			border-radius: 4px;
			background: linear-gradient(135deg,#0091FF33,#0091FF);
			font-size: 12px;
			color: #fff;
		}
	}
	.right_div{
		width: calc(100% - 130px);
		.r_title{
			font-size: 16px;
			color: #333;
		}
	}
	.chain_view{
		background-color: #ECF3FF;
		color: #3D7CE2;
		padding: 0 4px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 0 0;
		display: inline-block;
	}
	.add_view{
		display: flex;
		font-size: 12px;
		margin-top: 6px;
		color:#999;
		image{
			max-width: 14px;
			min-width: 14px;
			height: 14px;
			margin-right: 6px;
			margin-top: 1px;
		}
	}
	.color_red{
		color: #f1340e;
	}
	.div100{
		width: 100%;
	}
}


.sz_div{
	width: calc(100% - 20px);
	border-radius: 13px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(227, 195, 148, 1) 100%);
	// background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(205, 228, 255, 1) 100%);
	box-shadow: 0px 1px 10px 0px rgba(10, 71, 117, 0.12);
	padding: 10px;
	.sz_top{
		font-size: 12px;
		// font-weight: bold;
		color: #333;
		position: relative;
		.sz_top_item{
			width: 37%;
			.sz_top_text{
				margin: 4px 0;
			}
			.sz_name{
				display: inline-block;
				Text-align:justify;
				text-align-last:justify;
				min-width: 60px;
				max-width: 60px;
			}
			.sz_top_num{
				font-size: 18px;
				color: #C79D5E;
				position: relative;
				bottom: -1px;
				font-weight: 400;
			}
		}
		.img{
			width: 30%;
			position: absolute;
			right: -14px;
			top: -8px;
		}
	}
	.mapImg{
		// margin: 10px 0 10px;
		.img{
			width: 100%;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, 1);   
			overflow: hidden;
		}
	}
	.sz_type{
		height: 32px;
		width: calc(100% - 6px);
		background-color: rgba(201, 160, 99, 1);
		border-radius: 8px;
		overflow: hidden;
		color: #e1e1e1;
		align-items: center;
		padding: 0 3px;
		.sz_type_item{
			height: 26px;
			line-height: 26px;
			padding: 0 10px;
			font-size: 14px;
			transition: all 0.5s;
		}
		.item_isActive{
			background: rgba(133, 95, 38, 1);
			color: #fff;
			border-radius: 5px;
		}
	}
	.charts-box{
		width: 100%;
		height: 200px;
		margin-top: 10px;
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);
	}
}
.zx_div{
	margin: 14px 0 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 10px 0px rgba(0, 145, 255, 0.1);
	position: relative;
	.image{
		width: 100%;
		height: 40px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.news{
		height: 60px;
		width: calc(100% - 100px);
		overflow: hidden;
		position: relative;
		left: 100px;
		margin-bottom: 20px;
	}
	.news_item{
		font-size: 14px;
		padding: 9px 0;
		height: 40px;
		color: #666;
		line-height: 20px;
		width: 100%;
		position: relative;
		
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
}
.anim{
	transition: all 0.5s;
}
</style>

